<template>
  <div>
    <div class="title">
      <slot name="globalOperate"></slot>
      <div class="page fr">
        <pagination
          :small="true"
          :currentPage="pagination.currentPage"
          :count="pagination.count"
          @turnPage="turnPage"
          :pageSize="limit"
          :totalPage="totalPage"
        >
        </pagination>
      </div>
    </div>
    <el-table
      :highlight-current-row="type === 'index' || highlight"
      size="mini"
      :stripe="true"
      @selection-change="selectionChange"
      :data="data">
      <el-table-column
        v-if="type"
        :type="type"
        width="50">
      </el-table-column>
      <template v-for="item in tableHead">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          width=""
          :show-overflow-tooltip="item.tooltip"
          :sortable="item.sort"
          :sort-method="sortMethod(item)"
        >
          <template scope="scope" >
            <!--点击内容-->
            <span class="main-color click" v-if="item.special === 'click'" @click="operate({type:item.prop, val:scope.row})">{{ scope.row[item.prop] }}</span>
            <!--操作-->
            <template v-else-if="item.special === 'operate'">
              <span class="main-color operate" v-for="one in item.operate" @click="operate({type:one.type, val:scope.row})" :class="one.class">{{one.name}}</span>
            </template>
            <!--操作内容改变-->
            <template v-else-if="item.special === 'operateContent'">
              <span class="main-color operate" v-for="one in scope.row[item.prop]" @click="operate({type:one.type, val:scope.row})" :class="one.class">
                <a :href="scope.row.downloadUrl" v-if="one.download" download target="_blank">{{one.name}}</a>
                <span v-else>{{one.name}}</span>
              </span>
            </template>
            <!--文字颜色-->
            <span v-else-if="item.special === 'color'" :style="{color: scope.row[item.prop].color}">{{scope.row[item.prop].name}}</span>
            <!--文字样式-->
            <span v-else-if="item.special === 'status'" :class="[scope.row.status]">{{scope.row[item.prop]}}</span>
            <!--用html渲染-->
            <span v-else-if="item.special === 'html'" v-html="scope.row[item.prop]"></span>
            <div v-else-if="item.special === 'badge'" class="badge">
              <el-badge  is-dot :hidden="scope.row.isRead">{{scope.row[item.prop]}}</el-badge>&nbsp;
            </div>
            <!--普通-->
            <template v-else>{{scope.row[item.prop]}}</template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  import pagination from '@/components/public-modules/card/Pagination.vue'
  export default {
    name: 'commonTable',
    data () {
      return {
      }
    },
    props: {
      highlight: {type: Boolean, default: false},
      pagination: Object,
      limit: {type: Number, default: 10},
      data: Array,
      tableHead: {type: Array, default: function () { return [] }},
      type: {type: String, default: ''} // "index"单选，"selection" 多选
    },
    components: {
      pagination
    },
    computed: {
      totalPage () {
        return Math.ceil(this.pagination.count / this.limit) || 0
      }
    },
    methods: {
      turnPage (val) {
        this.$emit('turnPage', val)
      },
      operate (val) {
        this.$emit('operate', val)
      },
      selectionChange (val) {
        this.$emit('selectionChange', val)
      },
      sortMethod (item) {
        return function (c, d) {
          let one = ''
          let two = ''
          if (item.special === 'color') {
            one = c[item.prop].name
            two = d[item.prop].name
          } else {
            one = c[item.prop]
            two = d[item.prop]
          }
          // element排序需要返回布尔值
          // if (one.localeCompare(two) === -1) {
          //   return true
          // } else if (one.localeCompare(two) === 1) {
          //   return false
          // }
          if (typeof one === 'number') {
            return one - two
          } else {
            return one.localeCompare(two)
          }
        }
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../../assets/common.styl'
  .title
    height 30px
    padding-top 10px
    border 1px solid #d5d4da
    border-bottom none
  .main-color
    color $c-main
  .click
    cursor pointer
  .operate
    display inline-block
    padding-right:10px
    cursor pointer
  .delete
    color $c-pink
  .badge
    padding-top 5px
  .dealing
    color $cf-color2
</style>
